<template>
	<page-meta :root-font-size="fontSize"></page-meta>
	<view class="myView">
		<!-- 照片背景图 -->
		<view>
			<image src="../static/titcket/advertising.png" class="imageTop" mode="aspectFill"></image>
		</view>
		<!-- 车票查询 -->
		<view class="queryTickets">
			<view class="ticketView">
				<view class="lineClass" style="margin-top: 30rpx;">
					<view class="queryView">
						<button class="queryButton jh_fs_32" @click="queryClick1">武夷新区-延平</button>
					</view>
					<view class="queryView">
						<button class="queryButton jh_fs_32" @click="queryClick2">延平-武夷新区</button>
					</view>
					<!-- 					<view class="start jh_fs_32">
						<u-input class="jh_fs_32" @click="startStationTap" disabled input-align='center' style="color: #2C2D2D;" v-model="Departure" placeholder="选择上车点" />
					</view>
					<view class="end jh_fs_32">
						<u-input class="jh_fs_32" disabled v-model="actionType" input-align='center' type="select" placeholder="" @click="endStationTap" />
					</view> -->
				</view>

				<view class="lineClass" style="margin-top: -20rpx;">
					<view style="margin-left: 50rpx;font-weight: 400;font-size: 32rpx;">出行日期:</view>
					<view style="margin-left: 20rpx;" @click="calendarSelect">
						<view class="dateClass jh_fs_32" style="margin-left: 50rpx;">{{selectDate}}</view>
					</view>
				</view>
				<view
					style="position: absolute;border-bottom: #cddad6 0.2px solid;width: 85%;margin-left: 32rpx;margin-top: -24rpx;">
				</view>
				<!-- <view class="queryView">
					<button class="queryButton jh_fs_32" @click="queryClick">查 询</button>
				</view> -->
			</view>

			<view class="historyView">
				<view style="justify-content: space-between; align-items: center;flex-direction: row;">
					<text class="historyTitle jh_fs_28">历史记录</text>
					<text class="clearHistory jh_fs_28" @click="clickHistory">清除历史</text>
				</view>
				<view class="historyListView">
					<text class="historyText jh_fs_28 jh_ellipsis" @click="historyItemTap(index)"
						v-for="(i,index) in HistoryLines1" :key=index v-if="index<10">{{i}}</text>
				</view>
			</view>
		</view>
		<u-action-sheet :list="actionList" @click="actionClick" v-model="actionShow"></u-action-sheet>
		<uni-calendar ref="calendar" :insert="false" :start-date="'1997-01-01'" @confirm="confirm"></uni-calendar>
	</view>
</template>

<script>
	var _self;
	export default {
		data() {
			return {
				fontSize: '',
				isTranslateX: false,
				normalPickerNum: 0,
				specialPickerNum: 0,
				isNormal: 0,
				HistoryLines1: [],
				Departure: '武夷新区', //发车点
				Destination: '', //终点
				actionShow: false,
				actionType: '出发',
				actionList: [{
					text: '出发',
					color: 'blue',
					fontSize: 28,
					subText: ''
				}, {
					text: '到达',
					color: 'blue',
				}],
				actionIndex: 0,
				selectDate: '',
				typeNum: 1,
				changeText: '',
				dateShow: true,
				popDate: '',
				startStation: '', //实际起始站
				stationChange: '武夷新区',
				Latitude: '',
				Longitude: '',
				startLatitude: '',
				startLongitude: '',
				endLatitude: '',
				endLongitude: '',
				endStation: '', //实际终点站
				current: 1,
				titleList: [{
						name: '城际快车'
					},
					{
						name: '汽车票'
					},
					{
						name: '定制巴士'
					}
				],
			};
		},
		onLoad(params) {
			_self = this;
			_self.fontSize = getApp().globalData.fontSize;
			_self.selectDate = _self.getTodayDate();
			_self.popDate = _self.getTodayDate();
			//读取历史记录
			uni.getStorage({
				key: 'HistoryLines1',
				success: function(data) {
					_self.HistoryLines1 = data.data;
					if (data.data) {
						var station = data.data[0].split('-');
						_self.Departure = station[0];
						_self.Destination = station[1];
						//实际起始站
						_self.startStation = station[0];
						//实际终点站
						_self.endStation = station[1];
					}
				}
			})
		},
		methods: {
			//---------------------------------点击车票类型---------------------------------
			typeClick(params) {
				if (params == 'expressTicket') {
					uni.navigateBack();
				}
			},

			//---------------------------------点击起点站---------------------------------
			startStationTap() {
				//监听事件,监听下个页面返回的值
				uni.$on('startStationChange', function(data) {
					console.log('起点---', data, _self.actionIndex);
					_self.stationChange = data.data,
						_self.Latitude = data.StationLocation.split(',')[1],
						_self.Longitude = data.StationLocation.split(',')[0],

						// _self.Departure = data.data;
						// //实际起始站
						// _self.startStation = data.data;
						// _self.startLatitude = data.StationLocation.split(',')[1];
						// _self.startLongitude = data.StationLocation.split(',')[0];

						// _self.Destination = '';
						// //实际起始站
						// _self.endStation = '';
						// _self.endLatitude = '';
						// _self.endLongitude = '';
						//清除监听，不清除会消耗资源
						uni.$off('startStationChange');
				});
				uni.navigateTo({
					url: '../stationPicker/stationPicker?stationType=' + 'start'
				})
			},
			//---------------------------------选择出发/返回---------------------------------
			actionClick: function(index) {
				// console.log(`点击了第${index + 1}项，内容为：${this.actionList[index].text}`)
				_self.actionIndex = index;
				_self.actionType = _self.actionList[index].text;
			},
			//---------------------------------点击终点站---------------------------------
			endStationTap() {
				_self.actionShow = true;
				//监听事件,监听下个页面返回的值
				// uni.$on('endStationChange', function(data) {
				// 	console.log('终点---',data);
				// 	_self.destination = data.data;
				// 	//实际终点站
				// 	_self.endStation = data.data;
				// 	_self.endLatitude = data.StationLocation.split(',')[1];
				// 	_self.endLongitude = data.StationLocation.split(',')[0];
				//     //清除监听，不清除会消耗资源
				//     uni.$off('endStationChange');
				// });
				// uni.navigateTo({
				// 	url:'../stationPicker/stationPicker?stationType=' + 'end'
				// })
			},
			tabChange: function(index) {
				console.log(1122);
				_self.current = index;
				switch (index) {
					case 0:
						uni.navigateBack();
						break;
					case 1:

						break;
					case 2:
						uni.$emit('changeTitle');
						uni.navigateBack();
						break;
				}
			},
			changeClick() {
				_self.isTranslateX = !_self.isTranslateX;

				if (_self.Departure != '' && _self.Departure != '') {
					_self.changeText = _self.Departure;
					_self.Departure = _self.Destination;
					_self.Destination = _self.changeText;
				}
				console.log('起点' + _self.Departure, '终点' + _self.Destination);
			},
			//---------------------------------查询---------------------------------
			queryClick() {
				var station = _self.Departure;
				if (_self.HistoryLines1) {
					for (let i = 0; i <= _self.HistoryLines1.length; i++) {
						if (station == _self.HistoryLines1[i]) {
							_self.HistoryLines1.splice(i, 1);
						}
					}
					_self.HistoryLines1.unshift(_self.Departure);
				}
				uni.setStorage({
					key: 'HistoryLines1',
					data: _self.HistoryLines1,
				})
				console.log(_self.stationChange);
				if (_self.actionIndex == 0) {
					//出发
					_self.Departure = _self.stationChange;
					_self.Destination = '';
					_self.startLatitude = _self.Latitude;
					_self.startLongitude = _self.Longitude;
					_self.endLatitude = '';
					_self.endLongitude = '';
				} else {
					//到达
					_self.Destination = _self.stationChange;
					_self.Departure = '';
					_self.startLatitude = '';
					_self.startLongitude = '';
					_self.endLatitude = _self.Latitude;
					_self.endLongitude = _self.Longitude;
				}
				var stationInfo = {
					type: '客运',
					selectDate: _self.popDate.replace(/-/g, '/'),
					startStation: _self.Departure,
					endStation: _self.Destination,
					startLatitude: _self.startLatitude,
					startLongitude: _self.startLongitude,
					endLatitude: _self.endLatitude,
					endLongitude: _self.endLongitude
				}
				console.log(stationInfo);
				uni.navigateTo({
					url: '../Order/ConfirmOrder?stationInfo=' + JSON.stringify(stationInfo)
				})
			},
			//---------------------------------武夷新区-延平查询---------------------------------
			queryClick1() {
				var station = '武夷新区-延平汽车站';
				if (_self.HistoryLines1) {
					for (let i = 0; i <= _self.HistoryLines1.length; i++) {
						if (station == _self.HistoryLines1[i]) {
							_self.HistoryLines1.splice(i, 1);
						}
					}
					_self.HistoryLines1.unshift('武夷新区-延平汽车站');
					uni.setStorage({
						key: 'HistoryLines1',
						data: _self.HistoryLines1,
					})
				}
				else{
					uni.setStorage({
						key: 'HistoryLines1',
						data: '武夷新区-延平汽车站',
					})
				}
				console.log(_self.stationChange);
				var stationInfo = {
					type: '客运',
					selectDate: _self.popDate.replace(/-/g, '/'),
					startStation: '武夷新区客运站',
					endStation: '延平汽车站',
					startLatitude: _self.startLatitude,
					startLongitude: _self.startLongitude,
					endLatitude: _self.endLatitude,
					endLongitude: _self.endLongitude
				}
				console.log(stationInfo);
				uni.navigateTo({
					url: '../Order/ConfirmOrder?stationInfo=' + JSON.stringify(stationInfo)
				})
			},
			//----------------------------------延平-武夷新区查询---------------------------------
			queryClick2() {
				var station = '延平汽车站-武夷新区';
				if(_self.HistoryLines1) {
					for(let i = 0; i <= _self.HistoryLines1.length;i++){
						if(station == _self.HistoryLines1[i]) {
							_self.HistoryLines1.splice(i,1);
						}
					}
					_self.HistoryLines1.unshift('延平汽车站-武夷新区');
					uni.setStorage({
						key: 'HistoryLines1',
						data: _self.HistoryLines1,
					})
				}
				else{
					uni.setStorage({
						key: 'HistoryLines1',
						data: '延平汽车站-武夷新区',
					})
				}
				console.log(_self.stationChange);
				var stationInfo = {
					type: '客运',
					selectDate: _self.popDate.replace(/-/g, '/'),
					startStation: '延平汽车站',
					endStation: '武夷新区客运站',
					startLatitude: _self.startLatitude,
					startLongitude: _self.startLongitude,
					endLatitude: _self.endLatitude,
					endLongitude: _self.endLongitude
				}
				console.log(stationInfo);
				uni.navigateTo({
					url: '../Order/ConfirmOrder?stationInfo=' + JSON.stringify(stationInfo)
				})
			},
			//---------------------------------清除历史---------------------------------
			clickHistory() {
				_self.HistoryLines1 = [];
				uni.setStorage({
					key: 'HistoryLines1',
					data: _self.HistoryLines1,
				})
			},
			//---------------------------------点击历史记录---------------------------------
			historyItemTap(index) {
				let stationArray = _self.HistoryLines1[index].split('-');
				_self.Departure = stationArray[0];
				_self.Destination = stationArray[1];
				// _self.Departure = _self.HistoryLines1[index];
				console.log('12313',stationArray);
				var stationInfo = {
					type:'客运',
					selectDate:_self.popDate.replace(/-/g,'/'),
					startStation:_self.Departure,
					endStation:_self.Destination,
					startLatitude:_self.startLatitude,
					startLongitude:_self.startLongitude,
					endLatitude:_self.endLatitude,
					endLongitude:_self.endLongitude
				}
				uni.navigateTo({
					url:'../Order/ConfirmOrder?stationInfo=' + JSON.stringify(stationInfo)
				})
			},
			//---------------------------------打开日历---------------------------------
			calendarSelect: function() {
				_self.$refs.calendar.open();
			},
			//---------------------------------日期确定---------------------------------
			confirm(params) {
				console.log(params);
				_self.dateShow = false;
				_self.selectDate = params.fulldate + ' ' + params.lunar.ncWeek;
				_self.popDate = params.fulldate;
			},
			//---------------------------------获取当前日期---------------------------------
			getTodayDate() {
				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var timer = year + '-' + month + '-' + day;
				return timer;
			},
		}
	}
</script>

<style lang="scss">
	.myView {
		flex-direction: column;
		width: 750rpx;
	}

	// 背景图片
	.imageTop {
		width: 750rpx;
		height: 440upx;
	}

	//查询车票整块
	.queryTickets {
		width: 706rpx;
		border-radius: 20rpx;
		// left: 22rpx;
		margin-left: 22rpx;
		// margin-top: -60rpx;
	}

	.ticketView {
		background-color: #FFFFFF;
		border-radius: 20rpx;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	//选择起始点
	.lineClass {
		// margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-items: center;
		padding-left: 20upx;
		padding-right: 20upx;
		margin-left: -20rpx;

	}

	//转换图片
	.changeImage {

		width: 57upx;
		height: 59upx;
		padding-top: 44upx;
		margin: 0 auto;

	}

	//出发点
	.start {
		font-weight: 300;
		color: #2C2D2D;
		width: 200rpx;
		border-bottom: 1upx solid #dadada;
		margin-top: 70rpx;
		padding-bottom: 20rpx;
		position: relative;
		margin-right: 30rpx;
		margin-left: 60rpx;
	}

	.end {
		font-weight: 300;
		color: #2C2D2D;
		width: 200upx;
		border-bottom: 1upx solid #dadada;
		margin-top: 70rpx;
		padding-bottom: 20rpx;
		position: relative;
		margin-left: 30rpx;
	}

	//选择日期
	.dateClass {
		font-weight: 400;
		line-height: 125upx;
		margin-left: 60rpx;
	}

	//查询视图
	.queryView {
		// margin-top: 60upx;
		margin-top: 30rpx;
		margin-left: 29upx;
		margin-right: 29upx;
		padding-bottom: 40rpx;
	}

	//查询
	.queryButton {
		width: 300rpx;
		height: 90upx;
		background: linear-gradient(270deg, #EC5249, #EF7D4E);
		color: #FFFFFF;
		border-radius: 45upx;
	}

	.historyView {
		padding-top: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		width: 706upx;
		font-family: MicrosoftYaHei;
		color: #999999;
		font-size: 24upx;
	}

	.historyTitle {
		color: #2C2D2D;
		margin-left: 20rpx;
	}

	.historyListView {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		color: #999999;
		// font-size: 20rpx;
		font-weight: 300;
		margin-left: 20rpx;
		margin-right: 20rpx;
		padding-bottom: 20rpx;
	}

	.historyText {
		margin-top: 20rpx;
		margin-right: 20rpx;
		color: #666666;
		// width: 200rpx;
	}

	.clearHistory {
		color: #2C2D2D;
		margin-right: 20rpx;
		float: right;
	}

	.row-rotate {
		transition-duration: 0.3s;
		transform: rotate(0deg);
	}

	.rotate {
		transition-duration: 0.3s;
		transform: rotate(720deg);
	}

	.row-translateX {
		transition-duration: 0.3s;
		transform: translateX(0px);
	}

	.translateXR {
		transform: translateX(190px);
	}

	.translateXL {
		transform: translateX(-190px);
	}
</style>
